<template>
  <div>
    <div v-if="detail">
      <div class="gl_mb_20">
        <el-divider content-position="left">
          <span class="divider_title">明细</span>
        </el-divider>
        <div class="text">
          <p><span class="text_color">学员：</span>{{ detail.StudentName }}</p>
          <p><span class="text_color">经办日期：</span>{{ detail.HandlingDate | FormatDate('yyyy-MM-dd HH:mm:ss') }}</p>
          <p><span class="text_color">经办人：</span>{{ detail.HandlingAccount || '- -' }}</p>
          <p><span class="text_color">销售员：</span>{{ detail.EmployeeName }}</p>
          <el-row :gutter="15">
            <el-col :span="7">
              <p><span class="text_color">选择卡种：</span>{{ detail.MembershipCarName }}</p>
            </el-col>
            <el-col :span="4">
              <p><span class="text_color">课时：</span>{{ detail.ClassPeriod || '- -' }}</p>
            </el-col>
            <el-col :span="4">
              <p>
                <span class="text_color">有效期：</span>
                {{ detail.EffectivePeriod }}
                <template v-for="ktem in dict.effectivePeriodType">
                  {{ ktem.code === detail.EffectivePeriodTypeCode ? ktem.value : '' }}
                </template>
              </p>
            </el-col>
          </el-row>
          <el-row v-for="item in detail.MaterialDetails" :key="item.MaterialId" :gutter="15">
            <el-col :span="7">
              <p><span class="text_color">赠送商品：</span>{{ item.Name }}</p>
            </el-col>
            <el-col :span="4">
              <p><span class="text_color">颜色：</span>{{ item.Color }}</p>
            </el-col>
            <el-col :span="4">
              <p><span class="text_color">型号：</span>{{ item.Size }}</p>
            </el-col>
            <el-col :span="4">
              <p><span class="text_color">数量：</span>{{ item.Count }}</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    payAmount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  }
};
</script>

<style scoped>
.divider_title {
  font-size: 16px;
  color: #353434;
  font-weight: bold;
  line-height: 20px;
}
.text {
  font-size: 14px;
  color: #353434;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 12px;
}
.text_color {
  color: #939393;
}
</style>
